---
title: "Accessibility Checker Rule Help: WCAG20_Body_FirstAContainsSkipText_Native_Host_Sematics"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={16} colMd={8} colSm={4} className="toolHead">

### Verify the description of the first hyperlink communicates where it links to

<div id="locLevel"></div>

The description of the first hyperlink must communicate where it links to

</Column>
</Row>
<Row>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

### Why is this important?

Navigating to the main content on a page without a pointing device is tedious when there is other information, such as banners, navigation and search bars that are in the tab order. Although screen reader users can jump between regions, headings and other element types, other keyboard-only users do not have access to this functionality. Having initial links on a page that any user can follow to get to the main content or to skip past repeated content makes keyboard navigation vastly more efficient for these users. These links must clearly state where they lead to.

<div id="locSnippet"></div>

### What to do

 * If this link skips content on the page, verify the link text communicates where it skips to (e.g. "Jump to site navigation");
 * OR, if this link goes to the main content on the page, set the link text to "Skip to main content".

For example:

<CodeSnippet type="single" light={true}>&lt;A href="#maincontent"&gt;Skip to main content.&lt;/A&gt;</CodeSnippet>

</Column>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### About this requirement

[IBM 2.4.1 Bypass Blocks](https://www.ibm.com/able/requirements/requirements/#2_4_1)
[WCAG 2.1 technique G1](https://www.w3.org/WAI/WCAG21/Techniques/general/G1)

### Who does this affect?

 * People who rely on keyboard control
 * People with low vision using screen magnification
 * People with dexterity impairment

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
